<template>
    <div>
      <template>
        <!--pc数据统计-->
        <!--<Row type="flex" justify="center" :gutter="20">
          <Col span="12">
            <Card class="card">
              密切接触情况走势
              <contact-time-echart :width="echartWidth" :height="300"></contact-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              各区县密切接触情况统计
              <contact-district-echart :width="echartWidth" :height="300"></contact-district-echart>
            </Card>
          </Col>
        </Row>
        <br>-->
        <!--<Row :gutter="20">
          <Col span="24">
            <Card class="card">
              &lt;!&ndash;全市地图&ndash;&gt;
              <map-echart :width="offsetWidth - 380" :height="500"></map-echart>
            </Card>
          </Col>
        </Row>
        <br>-->
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <!--每日外地来沈人数占比统计-->
              <province-in-daily-ratio-echart :width="echartWidth" :height="300"></province-in-daily-ratio-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <!--特别关注地区人数 排查统计-->
              <focus-area-echart :width="echartWidth" :height="300"></focus-area-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <!--来沈人员趋势-->
              <city-time-echart :width="echartWidth" :height="300"></city-time-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <!--各区县来沈人员经过地-->
              <city-district-echart :width="echartWidth" :height="300"></city-district-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <!--各省来沈人数占比-->
              <province-in-ratio-echart :width="echartWidth" :height="300"></province-in-ratio-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <!--离沈各省人数占比-->
              <province-out-ratio-echart :width="echartWidth" :height="300"></province-out-ratio-echart>
              <!--社区来沈人数前十统计-->
              <!--<num-community-echart :width="echartWidth" :height="300"></num-community-echart>-->
            </Card>
          </Col>
        </Row>
        <br>
        <!--<Row :gutter="20">
          <Col span="8">
            <Card class="card">
              全市当日上报人员流动比例
              <flow-ratio-echart :width="echartWidth" :height="300"></flow-ratio-echart>
            </Card>
          </Col>
          <Col span="8">
            <Card class="card">
              全市当日上报隔离方式比例
              <isolation-mode-ratio-echart :width="echartWidth" :height="300"></isolation-mode-ratio-echart>
            </Card>
          </Col>
          <Col span="8">
            <Card class="card">
              人员状态占比统计
              <status-ratio-echart :width="echartWidth" :height="300"></status-ratio-echart>
            </Card>
          </Col>
        </Row>
        <br>-->
        <Row :gutter="20">
          <Col span="12">
            <Card class="card">
              <!--重点排查对象统计-->
              <!--<zdpcdx-district-echart :width="echartWidth" :height="300"></zdpcdx-district-echart>-->
              <!--各区流动人数统计-->
              <flow-district-echart :width="echartWidth" :height="300"></flow-district-echart>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <!--各区县上报处置类型统计-->
              <type-district-echart :width="echartWidth" :height="300"></type-district-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row type="flex" justify="center" :gutter="20">
          <Col span="12">
            <Card class="card">
              <!--<fever-time-echart :width="echartWidth" :height="echartHeight"></fever-time-echart>-->
              <condition-time-echart2 :width="echartWidth" :height="300"></condition-time-echart2>
            </Card>
          </Col>
          <Col span="12">
            <Card class="card">
              <fever-district-echart :width="echartWidth" :height="300"></fever-district-echart>
            </Card>
          </Col>
        </Row>
        <br>
        <Row type="flex" justify="center" :gutter="20">
          <Col span="24">
            <Card class="card">
              <city-district-table></city-district-table>
            </Card>
          </Col>
        </Row>
      </template>
    </div>
</template>

<script>
// import AreaEchart from './compoments/area-echart'
// import DailyEchart from './compoments/daily-echart'
import FeverDistrictEchart from './compoments/fever-district-echart'
// import FeverTimeEchart from './compoments/fever-time-echart'
import CityTimeEchart from './compoments/city-time-echart'
import CityDistrictEchart from './compoments/city-district-echart'
// import ContactDistrictEchart from './compoments/contact-district-echart'
// import ContactTimeEchart from './compoments/contact-time-echart'
// import ConditionTimeEchart from './compoments/condition-time-echart'
// import ConditionDistrictEchart from './compoments/condition-district-echart'
// import YiqingContactTimeEchart from './compoments/yiqing-contact-time-echart/index'
// import YiqingContactDistrictEchart from './compoments/yiqing-contact-district-echart/index'
import ConditionTimeEchart2 from './compoments/condition-time-echart2/index'
// import FlowRatioEchart from './compoments/flow-ratio-echart/index'
// import IsolationModeRatioEchart from './compoments/isolation-mode-ratio-echart/index'
// import NumCommunityEchart from './compoments/num-community-echart/index'
// import ZdpcdxDistrictEchart from './compoments/zdpcdx-district-echart/index'
// import StatusRatioEchart from './compoments/status-ratio-echart/index'
import TypeDistrictEchart from './compoments/type-district-echart/index'
import CityDistrictTable from './compoments/city-district-table/index'
import FlowDistrictEchart from './compoments/flow-district-echart/index'
import ProvinceInRatioEchart from './compoments/province-in-ratio-echart/index'
import ProvinceOutRatioEchart from './compoments/province-out-ratio-echart/index'
// import MapEchart from './compoments/map-echart/index'
import ProvinceInDailyRatioEchart from './compoments/province-in-daily-ratio-echart/index'
import FocusAreaEchart from './compoments/focus-area-echart/index'
export default {
  components: {
    FocusAreaEchart,
    ProvinceInDailyRatioEchart,
    // MapEchart,
    ProvinceOutRatioEchart,
    ProvinceInRatioEchart,
    FlowDistrictEchart,
    CityDistrictTable,
    TypeDistrictEchart,
    // StatusRatioEchart,
    // ZdpcdxDistrictEchart,
    // NumCommunityEchart,
    // IsolationModeRatioEchart,
    // FlowRatioEchart,
    ConditionTimeEchart2,
    // YiqingContactDistrictEchart,
    // YiqingContactTimeEchart,
    // ConditionDistrictEchart,
    // ConditionTimeEchart,
    // ContactTimeEchart,
    // ContactDistrictEchart,
    CityDistrictEchart,
    CityTimeEchart,
    // FeverTimeEchart,
    FeverDistrictEchart
    // DailyEchart,
    // AreaEchart
  },
  data () {
    return {
      routeState: '0',
      offsetWidth: document.documentElement.clientWidth,
      offsetHeight: document.documentElement.clientHeight,
      echartWidth: (document.documentElement.clientWidth - 300) / 2,
      echartHeight: (document.documentElement.clientHeight - 330) / 2
    }
  },
  mounted () {
  },
  methods: {
  },
  watch: {
    // $route (val) {
    //   this.routeState = val.query.w ? val.query.w : '0'
    // }
  }
}
</script>

<style lang="less" scoped>
  .card {
    background-color: rgba(200,200,200,0.1);
  }
</style>
